<template>
    <div id="index">
        <Search v-model="keyword" placeholder="宝贝搜索" @keyup.enter.native="search"></Search>
        <div id='swipe'>
            <Swipe :auto="4000">
                <SwipeItem v-for="(item,key) in lunbotu" :key="key">
                    <img :src="item.pic_url" :alt="item.name" srcset="" @click="clickPassword(item.password)">
                </SwipeItem>
            </Swipe>
        </div>
        <div class='goodlist'>
            <div class='block' v-for="(item,key) in tabs" :key="key" >
                <a :href="item.url">
                    <div class='tab-title'>
                        <span>{{item.title}}</span>
                    </div>
                    <div class="tab tab1" :style="'background-color:' + item.tab1BGC + ';z-index: 2;'"></div>
                    <div class='tab tab1'>
                        <span :style="'color:' + item.tab1C">{{item.tab1}}</span>
                        <img :src="item.tab1Pic">
                    </div>
                    <div class="tab tab2" :style="'background-color: ' + item.tab2BGC +';z-index: 2;'"></div>
                    <div class='tab tab2'>
                        <span :style="'color:' + item.tab2C">{{item.tab2}}</span>
                        <img :src="item.tab2Pic">
                    </div>
                </a>
            </div>
        </div>

        <div class="recommend-hd">— 淘抢购 —</div>
        <Good v-for="(good,k) in recommend" :key="k" :info="good"></Good>
        <p class='loading' style="color:#fe6325;">{{loadingTxt}}</p>
        <MyTabbar :selected="'首页'"></MyTabbar>
    </div>
</template>
<style>
</style>
<script>
import 'mint-ui/lib/style.css'
import Good from "../components/Good.vue";
import MyTabbar from "../components/MyTabbar.vue";
import { Search, TabItem,Swipe, SwipeItem,MessageBox,Toast } from 'mint-ui'
import axios from "axios";
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    components: {
        Search,Good,MyTabbar, TabItem,Swipe, SwipeItem 
    },
    data() {
        return {
            loadingTxt: '加载中...',
            loading: false,
            keyword: '',
            lunbotu:[
                {
                    name:'',
                    pic_url:'',
                    password:'',
                }
            ],
            recommend: [],
            recommendPage:1,
            recommendMaterialId:34616,
            tabs: [
                {
                    url: '#/jhs',
                    title: '聚划算',
                    tab1BGC: 'rgba(255, 111, 151, 0.05)',
                    tab2BGC:  'rgba(195, 144, 27, 0.05)',
                    tab1C: 'rgb(254, 78, 80)',
                    tab2C: 'rgb(255, 117, 24)',
                    tab1: '单品爆款',
                    tab2: '好货推荐',
                    tab1Pic: '//img.alicdn.com/tps/O1CN01Encb701CD6mb2LjTw_!!46-2-lubanu.png_125x125q90_.webp',
                    tab2Pic: 'https://img.alicdn.com/tps/O1CN01ceaL3G1BwABvLMGhQ_!!9-2-lubanu.png_125x125q90_.webp',
                },
                {
                    url: '#/hot',
                    title: '实时热销',
                    tab1BGC: 'rgba(55,146,249,5%)',
                    tab2BGC:  'rgba(255, 111, 151, 0.05)',
                    tab1C: 'rgb(250, 42, 89)',
                    tab2C: 'rgb(250, 42, 89)',
                    tab1: '限时半价',
                    tab2: '',
                    tab1Pic: 'https://img.alicdn.com/bao/uploaded/O1CN01aPDTlo28vIluLkV0W_!!2-item_pic.png',
                    tab2Pic: 'https://img.alicdn.com/bao/uploaded/O1CN01TyM1JI2LdynfZVRQR_!!2-item_pic.png',
                },
                {
                    url: '#/tttm',
                    title: '天天特卖',
                    tab1BGC: 'rgba(255, 111, 151, 0.05)',
                    tab2BGC:  'rgba(195, 144, 27, 0.05)',
                    tab1C: 'rgb(255, 117, 24)',
                    tab2C: 'rgb(254, 78, 80)',
                    tab1: '今日爆款',
                    tab2: '特卖',
                    tab1Pic: '//gw.alicdn.com/imgextra/O1CN01qE4iY21D07E3y8Qyy_!!153-2-lubanu.png_125x125q90_.webp',
                    tab2Pic: '//img.alicdn.com/tps/O1CN01qFkitJ1vQzYmkyKJV_!!6000000006168-0-yinhe.jpg_125x125q90_.webp',
                },
                {
                    url: '#/yhh',
                    title: '有好货',
                    tab1BGC: 'rgba(255, 111, 151, 0.05)',
                    tab2BGC:  'rgba(55,146,249,5%)',
                    tab1C: 'rgb(80, 189, 255)',
                    tab2C: 'rgb(254, 78, 80)',
                    tab1: '亿人推荐',
                    tab2: '品质好物',
                    tab1Pic: '//gw.alicdn.com/imgextra/i1/10/O1CN01pLqb0M1BwcTgOvN3f_!!10-2-lubanu.png_125x125q90_.webp',
                    tab2Pic: '//gw.alicdn.com/imgextra/i1/37/O1CN018SbCPh1C8zG99WnG5_!!37-0-lubanu.jpg_180x180q90_.webp',
                },
                {
                    url: '#/clf',
                    title: '潮流范',
                    tab1BGC: 'rgba(255, 111, 151, 0.05)',
                    tab2BGC:  'rgba(55,100,249,5%)',
                    tab1C: 'rgb(250, 20, 55)',
                    tab2C: 'rgb(254, 14, 280)',
                    tab1: '当下时尚',
                    tab2: '流行趋势',
                    tab1Pic: '//gw.alicdn.com/imgextra/i2/152/O1CN01TR9J3O1CzenMa6Vo4_!!152-2-lubanu.png_125x125q90_.webp',
                    tab2Pic: '//gw.alicdn.com/imgextra/i3/199/O1CN01HpmDqs1DLBOaekQb9_!!199-0-lubanu.jpg_180x180q90_.webp',
                },
                {
                    url: '#/de',
                    title: '大额卷',
                    tab1BGC: 'rgba(55, 111, 151, 0.05)',
                    tab2BGC:  'rgba(55,100,249,5%)',
                    tab1C: 'rgb(80, 120, 255)',
                    tab2C: 'rgb(254, 214, 80)',
                    tab1: '大面额折扣',
                    tab2: '',
                    tab1Pic: '//gw.alicdn.com/imgextra/i2/152/O1CN01TR9J3O1CzenMa6Vo4_!!152-2-lubanu.png_125x125q90_.webp',
                    tab2Pic: '//gw.alicdn.com/imgextra/i3/199/O1CN01HpmDqs1DLBOaekQb9_!!199-0-lubanu.jpg_180x180q90_.webp',
                }
            ]
        }
    },
    methods: {
        // 搜索框 获取值
        search() {
            this.$router.push({
                name:'search',
                query: {
                    keyword: this.keyword
               }
            })
        },
        getbottom(){
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            let numHeight = scrollTop + clientHeight;
            if( (scrollHeight > clientHeight) && (numHeight > scrollHeight - 20) && !this.loading){
                this.getGoods();
            }
        },
        getGoods(){
            if(this.loading) return ;
            this.loading = true;
            var _this = this;
            let page = this.recommendPage;
            let material_id = this.recommendMaterialId;
            axios.get('/taobao/dGmaterialOptimus?page=' + page + '&material_id=' + material_id).then(function(res){
                if(res.data.code !== 0){
                _this.loadingTxt = res.data.message;
                return ;
                }
                _this.recommend = _this.recommend.concat(res.data.data);
                _this.recommendPage++;
                _this.loading = false;
            }).catch(function (error) {
                _this.loading = false;
                console.log(error)
            });
        },
        setRem() {
            var docEl = document.documentElement;
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) {
                return;
            }
            docEl.style.fontSize = 145 * (clientWidth / 1080) + 'px';
        },
        setLunbotu(){
            var _this = this;
            axios.get('/taobao/getActivity').then(function(res){
                _this.lunbotu = res.data.data;
            });
        },
        clickPassword(password){
            console.log(password)
            MessageBox.confirm(password).then(action => {
                this.copyToClip(password,'复制成功,请打开淘宝跳转至活动会场');
            });
        },
        copyToClip(content, message) {
            var aux = document.createElement("input"); 
            aux.setAttribute("value", content); 
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy"); 
            document.body.removeChild(aux);
            if (message == null) {
                Toast("复制成功");
            } else{
                Toast(message);
            }
        }
    },
    created(){
        this.setRem();
    },
    beforeMount(){
        this.setLunbotu();
        this.getGoods();
    },
    mounted(){
        window.addEventListener('scroll', this.getbottom);
    },
    destroyed() { 
        window.removeEventListener('scroll', this.getbottom);
    }
}
</script>
<style>

body{
    background-color: #f4f4f4;
}
.mint-search{
    height: 10%;
}
.mint-searchbar {
    background-color: #fe6325;
}
.mint-searchbar-inner {    
    height: 0.4rem;
}
.mint-searchbar-cancel {
    color: white;
    font-size: 0.3rem;
}


#swipe{
    height: 4rem;
    margin-top: .1rem;
}
#swipe img{
    border-radius: .1rem;
    width: 95%;
}


.goodlist{
    background-color: white;
    width: 96%;
    border-radius: 10px;
    margin-top: .3rem;
    padding-top: .2rem;
    margin: 2%;
}
.block{
    position: relative;
    width: 49%;
    height: 3.1rem;
    display: inline-block;
}
.tab-title{
    height: .5rem;
}
.tab-title span{
    font-size: .4rem;
    top: 0;
    position: absolute;
    left: .1rem;
    font-weight: bold;
    color: black;
}
.tab{
    border-radius: 5px;
    text-align: left;
    width: 47%;
    display: inline-block;
    height: 2.2rem;
    
    position: absolute;
    top: .6rem;
}
.tab span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: .5rem;
    margin-left: .2rem;
    margin-top: .1rem;
    font-size: .3rem;
    font-weight: bold;
    position: absolute;
}
.tab img{
    position: absolute;
    top: .6rem;
    max-height: 1.6rem;
    max-width: 100%;
}
.tab1{
    left: 0;
}
.tab2{
    left: 50%;
}




.recommend-hd {
    padding: .3rem 0;
    height: .5rem;
    width: 100%;
    text-align: center;
    font-size: .4rem;
    font-weight: bold;
    color: #fe6325;
}
</style>